<!--
 * @Author: YuA
 * @Date: 2021-07-31 12:48:40
 * @LastEditTime: 2021-09-03 10:57:56
 * @FilePath: \netease-cloud-player\src\views\home\Home.vue
-->
<template>
  <div class="home" @click="sidebarHidden">
    <MainTabBar />
    <sidebar :class="{ sidebarMove: sidebarShow }" :user="nickname" />

    <nav-bar class="home_nav">
      <div slot="left" @click.stop="sidebarClick">&#xe62b;</div>
      <div class="nav-center" slot="center">
        <span>&#xe647;</span>
        <input type="text" />
      </div>
      <div slot="right">&#xe8c2;</div>
    </nav-bar>
    <div class="slide">
      <slides class="slides" :imgs="banners" />
    </div>
    <feature-view :recommends="recommends" />
    <recommend-view :recommendSong="recommendSong" class="index-recommendSong">
      <h2 class="feature-title-recommend">推荐歌单</h2>
      <span class="index-btn recommend-more">更多<em>&#xe629;</em></span>
    </recommend-view>
    <hot-podcast-view class="hot" :obj="HomeArrList" />
    <hot-audio-view :HomePodcastSong="HomePodcastSong" />
    <music-audio-view :HomeMusicAudioSong="HomeMusicAudioSong" />
    <radar-song-list-view :user="nickname" :RadarSongList="RadarSongList" />
    <look-live :HomeLookList="HomeLookList" />
    <exclusive-scene-view :HomeExclusiveSceneList="HomeExclusiveSceneList" />
    <SongPushView />
    <ranking-list-view />
    <music-date-view />
    <spruce-ktv-view />
    <broadcasting-view />
    <vedio-coauthor-view />
    <div></div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
// @ is an alias to /src
import {
  getHomeMultidata,
  getHomepage,
  getHomeRecommend,
  getHomeRecommendSong,
  getHomePodcastSong,
  getHomeMusicAudioSong,
  getUserName,
  getRadarSongList,
  getLookLiveSongList,
  getExclusiveScene
} from "network/home";
import MainTabBar from "components/content/MainTabBar/MainTabBar.vue";
import Sidebar from "components/content/sidebar/Sidebar";
import Slides from "components/common/swiper/Slides";
import NavBar from "components/common/navbar/NavBar";

import FeatureView from "./childComps/FeatureView.vue";
import RecommendView from "./childComps/RecommendView.vue";
import HotPodcastView from "./childComps/HotPodcastView.vue";
import HotAudioView from "./childComps/HotAudioView.vue";
import MusicAudioView from "./childComps/MusicAudioView.vue";
import RadarSongListView from "./childComps/RadarSongListView.vue";
import LookLive from "./childComps/LookLive.vue";
import ExclusiveSceneView from "./childComps/ExclusiveSceneView.vue";
import SongPushView from "./childComps/SongPushView.vue";
import RankingListView from "./childComps/RankingListView.vue";
import MusicDateView from "./childComps/MusicDateView.vue";
import VedioCoauthorView from "./childComps/VedioCoauthorView.vue";
import BroadcastingView from "./childComps/BroadcastingView.vue";
import SpruceKtvView from "./childComps/SpruceKtvView.vue";

export default {
  name: "Home",
  data() {
    return {
      sidebarShow: false,
      banners: [],
      recommends: [],
      recommendSong: [],
      HomeRecommendSong: [],
      HomePodcastSong: [],
      HomeMusicAudioSong: [],
      nickname: "",
      RadarSongList: [],
      HomeLookList: [],
      HomeExclusiveSceneList: [],
      HomeArrList: { title: "", children: [] }
    };
  },
  components: {
    MainTabBar,
    Sidebar,

    NavBar,
    Slides,

    RecommendView,
    FeatureView,
    HotPodcastView,
    HotAudioView,
    MusicAudioView,
    RadarSongListView,
    LookLive,
    ExclusiveSceneView,
    SongPushView,
    RankingListView,
    MusicDateView,
    VedioCoauthorView,
    BroadcastingView,
    SpruceKtvView
  },
  created() {
    this.getHomeMultidata();
    this.getHomepage();
    this.getHomeRecommend();
    this.getHomeRecommendSong();
    this.getHomePodcastSong();
    this.getHomeMusicAudioSong();

    this.getHomeUserName();
    this.getRadarSong();

    this.getHomeLookLiveSong();
    this.getHomeExclusiveSceneMain();

    this.getNewSong(this.cookie);
    this.getNewPlate(this.cookie);
    this.getAlbum(this.cookie);
  },
  computed: {
    userID: function() {
      return localStorage.getItem("id");
    },
    cookie: function() {
      return localStorage.getItem("cookie");
    }
  },
  methods: {
    ...mapActions(["getNewSong", "getNewPlate", "getAlbum"]),
    //^ 事件监听相关的方法
    sidebarClick() {
      this.sidebarShow = true;
    },
    sidebarHidden() {
      this.sidebarShow = false;
    },

    //^ 网络请求相关的方法
    //^ 请求轮播图
    getHomeMultidata() {
      getHomeMultidata().then(res => {
        this.banners = res.banners;
      });
    },
    //^ 请求推荐分类
    getHomepage() {
      getHomepage().then(res => {
        res.data.forEach(e => {
          this.recommends.push({ img: e.iconUrl, name: e.name });
        });
      });
    },
    //^ 请求推荐歌单
    getHomeRecommend() {
      getHomeRecommend().then(res => {
        res.result.forEach(e => {
          this.recommendSong.push({ img: e.picUrl, name: e.name });
        });
      });
    },
    //^ 请求推荐歌曲
    getHomeRecommendSong() {
      getHomeRecommendSong(this.cookie).then(res => {
        this.HomeArrList.title = res.playlist.name;
        let tempArr = res.playlist.tracks.map(item => {
          let rsitem = {};
          rsitem.name = item.name;
          rsitem.picUrl = item.al.picUrl;
          rsitem.user = item.al.name;
          return rsitem;
        });
        this.HomeArrList.children = [];
        for (let i = 0; i < tempArr.length / 3; i++) {
          this.HomeArrList.children[i] = tempArr.slice(3 * i, 3 * (i + 1));
        }
      });
    },
    //^ 请求热门播客
    getHomePodcastSong() {
      getHomePodcastSong().then(res => {
        console.log(res);
        res.playlists.forEach(e => {
          this.HomePodcastSong.push({ img: e.coverImgUrl, name: e.name });
        });
      });
    },
    //^ 请求精选音乐视频
    getHomeMusicAudioSong() {
      getHomeMusicAudioSong(this.cookie).then(res => {
        // console.log(res);
      });
    },
    //^ 请求用户名
    getHomeUserName() {
      getUserName(this.userID).then(res => {
        this.nickname = res.profile.nickname;
      });
    },
    //^ 请求雷达歌单
    getRadarSong() {
      getRadarSongList(this.cookie).then(res => {
        console.log(res);
        res.playlists.forEach(e => {
          this.RadarSongList.push({ img: e.coverImgUrl, name: e.name });
        });
      });
    },
    //^ 请求LOOK直播
    getHomeLookLiveSong() {
      getLookLiveSongList().then(res => {
        res.data.list.forEach(e => {
          this.HomeLookList.push({ img: e.avatarUrl, name: e.nickName });
        });
      });
    },
    //^ 专属场景歌单
    getHomeExclusiveSceneMain() {
      getExclusiveScene().then(res => {
        res.playlists.forEach(e => {
          this.HomeExclusiveSceneList.push({
            img: e.coverImgUrl,
            name: e.name
          });
        });
      });
    },
    //^ 新歌
    getHomeNewSong() {
      getNewSong(this.cookie).then(res => {
        //! 先拆分数组再过滤
        // for (let i = 0; i < res.result.length / 3; i++) {
        //   this.goods.newSong[i] = res.result.slice(3 * i, 3 * (i + 1));
        // }
        // this.goods.newSong = this.goods.newSong.map(item => {
        //   item = item.map(childItem => {
        //     let tempItem = {};
        //     tempItem.id = childItem.id;
        //     return tempItem;
        //   });
        //   return item;
        // });
      });
    }
  }
};
</script>
<style lang="scss">
.home {
  padding: 44px 0 49px;
  margin: 0 0 0 10px;
}

.home_nav {
  color: #fff;

  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
}

.nav-center {
  display: flex;

  height: 35px;
  margin-top: 5px;

  border-radius: 15px;
  border: 1px solid #d2d2d2;
  background-color: #d2d2d2;
  opacity: 0.5;

  line-height: 35px;

  font-size: 24px;
  input {
    background-color: transparent;
    border: 0;
    outline: none;
  }
  span {
    margin-left: 10px;
  }
}

.slide {
  min-height: 13em;
  margin: 10px 10px 10px 0;
  border-radius: 15px;
  overflow: hidden;
}

.slides {
  height: 150px;
}

.tab-control {
  position: sticky;
  top: 44px;

  z-index: 99;
}

.index-recommendSong {
  padding: 20px 0;
}

.sidebarMove {
  left: 0;
}
</style>
